<template>
  <div class="app-container">
    <!-- QQ 查绑 -->
    <el-card class="mb-4" header="QQ 查绑">
      <el-form :inline="true" @submit.prevent>
        <el-form-item label="QQ号">
          <el-input v-model="qqNumber" placeholder="请输入QQ号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryQQBind">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="qqBindResult.phone" class="mt-4">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="绑定手机号">{{ qqBindResult.phone }}</el-descriptions-item>
          <el-descriptions-item label="号码地区">{{ qqBindResult.phonediqu }}</el-descriptions-item>
          <el-descriptions-item label="LOL信息">{{ qqBindResult.lol }}</el-descriptions-item>
          <el-descriptions-item label="qqlm">{{ qqBindResult.qqlm }}</el-descriptions-item>
          <el-descriptions-item label="微博ID">{{ qqBindResult.wb }}</el-descriptions-item>
          <el-descriptions-item label="微博主页">
            <el-link
              v-if="qqBindResult.wb"
              :href="`https://weibo.com/u/${qqBindResult.wb}`"
              target="_blank"
              type="primary"
            >
              {{ "点击跳转至微博主页" }}
            </el-link>
            <span v-else>未绑定</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 手机号 查绑 -->
    <el-card class="mb-4" header="手机号 查绑">
      <el-form :inline="true" @submit.prevent>
        <el-form-item label="手机号">
          <el-input v-model="phoneNumber" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryPhoneBind">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="phoneBindResult.qq" class="mt-4">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="绑定QQ号">{{ phoneBindResult.qq }}</el-descriptions-item>
          <el-descriptions-item label="LOL信息">{{ phoneBindResult.lol }}</el-descriptions-item>
          <el-descriptions-item label="qqlm">{{ phoneBindResult.qqlm }}</el-descriptions-item>
          <el-descriptions-item label="微博ID" >{{ phoneBindResult.wb }}</el-descriptions-item>
          <el-descriptions-item label="微博主页" >
            <el-link
              v-if="phoneBindResult.wb"
              :href="`https://weibo.com/u/${phoneBindResult.wb}`"
              target="_blank"
              type="primary"
            >
              {{ "点击跳转至微博主页" }}
            </el-link>
            <span v-else>未绑定</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- LOL 查绑 -->
    <el-card class="mb-4" header="LOL 查绑">
      <el-form :inline="true" @submit.prevent>
        <el-form-item label="LOL昵称">
          <el-input v-model="lolName" placeholder="请输入LOL昵称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryLOLBind">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="lolBindResult.qq" class="mt-4">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="绑定QQ号">{{ lolBindResult.qq }}</el-descriptions-item>
          <el-descriptions-item label="游戏昵称">{{ lolBindResult.name }}</el-descriptions-item>
          <el-descriptions-item label="大区">{{ lolBindResult.daqu }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 微博 查绑 -->
    <el-card class="mb-4" header="微博 查绑">
      <el-form :inline="true" @submit.prevent>
        <el-form-item label="微博ID">
          <el-input v-model="weiboID" placeholder="请输入微博ID" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryWeiboBind">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="weiboBindResult.phone" class="mt-4">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="绑定手机号">{{ weiboBindResult.phone }}</el-descriptions-item>
          <el-descriptions-item label="号码地区">{{ weiboBindResult.phonediqu }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

// QQ 查绑
const qqNumber = ref("");
const qqBindResult = ref<any>({});
const queryQQBind = async () => {
  if (!qqNumber.value) {
    ElMessage.warning("请输入QQ号");
    return;
  }
  try {
    const res = await axios.get(`https://www.xywlapi.cc/qqcx2023?qq=${qqNumber.value}`);
    if (res.data && res.data.phone) {
      qqBindResult.value = res.data;
    } else {
      ElMessage.info("未找到绑定信息");
      qqBindResult.value = {};
    }
  } catch (error) {
    ElMessage.error("查询失败，请稍后重试");
    qqBindResult.value = {};
  }
};

// 手机号 查绑
const phoneNumber = ref("");
const phoneBindResult = ref<any>({});
const queryPhoneBind = async () => {
  if (!phoneNumber.value) {
    ElMessage.warning("请输入手机号");
    return;
  }
  try {
    const res = await axios.get(`https://www.xywlapi.cc/qqxc2023?phone=${phoneNumber.value}`);
    if (res.data && res.data.qq) {
      phoneBindResult.value = res.data;
    } else {
      ElMessage.info("未找到绑定信息");
      phoneBindResult.value = {};
    }
  } catch (error) {
    ElMessage.error("查询失败，请稍后重试");
    phoneBindResult.value = {};
  }
};

// LOL 查绑
const lolName = ref("");
const lolBindResult = ref<any>({});
const queryLOLBind = async () => {
  if (!lolName.value) {
    ElMessage.warning("请输入LOL昵称");
    return;
  }
  try {
    const res = await axios.get(`https://www.xywlapi.cc/lolname?name=${encodeURIComponent(lolName.value)}`);
    if (res.data && res.data.qq) {
      lolBindResult.value = res.data;
    } else {
      ElMessage.info("未找到绑定信息");
      lolBindResult.value = {};
    }
  } catch (error) {
    ElMessage.error("查询失败，请稍后重试");
    lolBindResult.value = {};
  }
};

// 微博 查绑
const weiboID = ref("");
const weiboBindResult = ref<any>({});
const queryWeiboBind = async () => {
  if (!weiboID.value) {
    ElMessage.warning("请输入微博ID");
    return;
  }
  try {
    const res = await axios.get(`https://www.xywlapi.cc/wbapi?id=${weiboID.value}`);
    if (res.data && res.data.phone) {
      weiboBindResult.value = res.data;
    } else {
      ElMessage.info("未找到绑定信息");
      weiboBindResult.value = {};
    }
  } catch (error) {
    ElMessage.error("查询失败，请稍后重试");
    weiboBindResult.value = {};
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.mb-4 {
  margin-bottom: 20px;
}
.mt-4 {
  margin-top: 20px;
}
</style>
